<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../../css/sm.min.css">
		<link rel="stylesheet" href=" ../../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<!-- css的使用-->
		<style type="text/css">
			#car{
				color: orangered;
			}
			#foot{
				
				
			}
			#createlist{
				background-color: orangered;
				color: white;
				border-radius: 30%;
				font-size: 20;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<!-- 社区入口 -->
				<h1 class="title">购物车</h1>
			</header>



			<!-- 工具栏 -->
			<nav class="bar bar-tab">	
				<a  class="tab-item external" href="../../shop_index.html">
					<span class="icon icon-home"></span>
					<span class="tab-label" >首页</span>
				</a>
				<a class="tab-item external" href="../chat/chat.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">消息</span>
				</a>
				<a id="car" class="tab-item external" href="cart.html">
					<span class="icon icon-cart"></span>
					<span class="tab-label">购物车</span>
				</a>
				<a class="tab-item external" href="../user/userCenter.html">
					<span class="icon icon-me"></span>
					<span class="tab-label">我的购物</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content" >
				<form  id="form">
					<!-- <input type="hidden" name="id" id="userid" value="" /> -->
				<!-- 添加到这里 -->				
				<div id="appendArea">
					
				</div>
			
				</form>
				
				
				<div id="foot"  >
					<div  class="content-block-title"></div>
						<div class="card">
						<div class="card-content">
						  <div class="card-content-inner">
							  合计:&nbsp;
							  <input type="button" name="" id="account" value="0" style="border: none;"/>件
							  <font color="orangered">¥</font>
							  <input type="button" name="" id="total" value="0"  style="border: none;"/>
							  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							  <input type="button" name="" id="createlist" value="结算" />
						  </div>
						</div>
					</div>
				</div>
				
			</div>

			
			
		</div> <!-- /vue -->	 
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/sm.js'></script>
		<script src='../../js/sm-extend.js'></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- VUE的使用 -->
		<script>		
		        var app = new Vue({
		            el:"#app",
		            data:{
						total:[],
		                carts:[],
						checkboxStatus:[]
		            },
		            // 方法区
		            methods:{
						//跳转到搜索页面的方法
						 goSearch:function(){ 
						window.location="../shop_search.html"
						},

		            },
					mounted(){
						
					}
		        });
		</script>
		<!-- 初始化js -->
		<script type="text/javascript">
			//获取用户id
			//var userId = "001";
			//初始化方法
			$(function(){
				
				initCart();
				
				
				$("#createlist").click(function(){
					createlist();
				});
				
			});

		</script>
		<!-- js方法 -->
		<script type="text/javascript">
			function initCart(){
				
				$.get({	type:"get",
						url:serviceIP+"/shop/initCartPage",
						dataType: 'json',
						headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
						success:function(d){
						//遍历条目
						for(var i = 0;i<d.data.length;i++){
							
							var cartItem =	"<div class='card' >"+
												"<div class=='card-header='>"+d.data[i].data3.nickname+"</div>"+
												"<div class=='card-content'>"+
													"<div class='card-content-inner'>"+
													"<img class='card-cover' src='"+d.data[i].data4.thumbnail+"' height='100px'  >"+
														"<input name='"+(i+1)+"' value='"+d.data[i].data.cartId+"' type='checkbox' id='"+d.data[i].data2.shopId+"'  onclick='javascript:totalPrice(\""+d.data[i].data2.price+"\",\""+d.data[i].data2.shopId+"\",\""+d.data[i].data.count+"\")' />"+
														""+d.data[i].data2.name+
													"</div>"+
												"</div>"+
												"<div class='card-footer'>"+
													"数量:"+d.data[i].data.count+"&nbsp;&nbsp;&nbsp;&nbsp;"+
													"小计:"+d.data[i].data.count*d.data[i].data2.price+
													"&nbsp;&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"+
													"<a href='javascript:confirmdelete(\""+d.data[i].data.cartId+"\")'>×</a>"
												"</div>"+
											"</div>";
									
							$("#appendArea").append(cartItem);
						}
					}
				}
			)
		}
			
			//计算总价的方法
			function totalPrice(price,shopId,count) {
	
				if(document.getElementById(shopId).checked){
					//修改总价
					var total = $("#total").val();
					total = eval(total+"+"+price*count);
					$("#total").val(total);
					//修改数量
					var account = $("#account").val();
					account = eval(account+"+"+count);
					$("#account").val(account);
				}else{
					//修改总价
					var total = $("#total").val();
					total = eval(total-count*price);
					$("#total").val(total);
					//修改数量
					var account = $("#account").val();
					account = eval(account-count);
					$("#account").val(account);
				}
			}
			//删除购物车条目的方法
			function confirmdelete(id){
				
				if(confirm("你确定要删除该商品吗?")){
					$.get({
				        type: 'get',
				        url: serviceIP+"/shop/deleteCartItem",
				        dataType: 'json',
						data:{
							cartId: id
						},
						headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
							alert(d.msg);
							location.reload();
						}
					})
				}
			}
	
			//创建订单的方法
			function createlist() {
				
				///$("#userid").val(userId);
				
				//alert($("#form").serialize());
				
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/creatList",
				        dataType: 'json',
						data: $("#form").serialize(),//此处写合用参数   //将表单数据序列化
						headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
						success:function(d){
						//alert(d.state);
						
						if(d.state==200){
							//跳转到订单确认页面,传输订单单号
							window.location.href="../order/orderExe.html?orderId="+d.data+"";
						}
						if(d.state==502){
							$.alert(d.msg)
						}
						if(d.state==500){
							$.alert(d.msg)
						}
				}
				
			});
			
			}
		</script>
		<!-- auxiliary js -->
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		<script type="text/javascript">
			$.init();
		</script>
	</body>
</html>
